<div class="col-8 col-lg-5">
  <div class="card rounded border-0 h-100 bg-transparent">
    <div class="row g-0">
      <!-- Thumbnail -->
      <div class="col-lg-4 thumbnail-hover-dark">
        <a href="/novel/series/{{ .ID }}">
          <div class="ratio ratio-3x4">
            <div class="thumbnail-wrapper rounded overflow-hidden">
              <img src="{{ .Cover.Urls.Four80Mw }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
            </div>
          </div>
        </a>
      </div>
      <!-- Information -->
      <div class="col-lg-8 px-0 px-lg-3 py-3 py-lg-0">
        <div
          class="d-flex flex-column justify-content-start align-items-start mb-3"
        >
          <h3 class="mb-2">
            <a href="/novel/series/{{ .ID }}" class="text-body">{{ .Title }}</a>
          </h3>
          <small class="text-body-secondary">
            {{- if .Total == 1 }}{{ .Total }} chapter{{- else }}{{ .Total }} chapters{{- end }}<span class="mx-1">&#x30FB;</span>{{.PublishedTotalWordCount }} words<span class="mx-1">&#x30FB;</span>{{ floor: .PublishedReadingTime / 60 }} mins
          </small>
        </div>
        <!-- Tags -->
        <div class="d-flex flex-wrap align-items-baseline mb-4">
          {{- if .AiType == 2 }}
          <span class="badge bg-warning text-dark me-2 mb-1">AI-generated</span>
          {{- end }}
          {{- range .Tags }}
            {* NOTE: early block to catch the R-18 tag *}
            {{- if isEmphasize(.) }}
            <span class="badge bg-danger me-2 mb-1">{{ . }}</span>
            {{- end }}
          {{- end }}
          {{- if .IsOriginal }}
          <span class="badge bg-primary me-2 mb-1">Original</span>
          {{- end }}
          {{- if .GenreID != "0" }}
          <span class="badge bg-secondary me-2 mb-1">{{ novelGenre: .GenreID }}</span>
          {{- end }}
          {{- range .Tags }}
            {{- if isEmphasize(.) }}
            {* Intentionally empty to not render anything to avoid duplication *}
            {{- else }}
            <div class="d-inline-block mb-1 me-2">
              <small>
              <a href="/tags/{{ escapeString(.) }}" class="text-primary-emphasis text-decoration-none text-wrap p-0 mb-0">#{{ . }}</a>
              </small>
            </div>
            {{- end }}
          {{- end }}
        </div>
        <a
          href="/novel/{{ .FirstNovelID }}"
          type="button"
          class="custom-btn-secondary"
        >
          <i class="bi bi-arrow-right me-2"></i>Read from the beginning
        </a>
      </div>
    </div>
  </div>
</div>
